<template>
	<div ref="pieChart" class="pieChart"></div>
</template>
<script>
	import * as echarts from "echarts";
	export default {
		props: {
			'legendData': {
				type: Array,
				default: function() {
					return [];
				}
			},
			'xData': {
				type: Array,
				default: function() {
					return [];
				}
			},
			'yData': {
				type: Array,
				default: function() {
					return [];
				}
			},
			'title': {
				type: String,
				default: function() {
					return '';
				}
			},
			'grName': {
				type: String,
				default: function() {
					return '';
				}
			},
			'color': {
				type: [Array, String],
				default: function() {
					return '';
				}
			}
		},
		mounted() {
			echarts.init(this.$refs.pieChart).setOption(this.option, true, {
				devicePixelRatio: 2.5
			});
			echarts.init(this.$refs.pieChart).resize();
			echarts.init(this.$refs.pieChart).on('click', params => {
				this.$emit('jumpClick', params.name)
			});
		},
		computed: {
			option() {
				// 环形图Option
				const pieOption = this.initEcharts();
				return pieOption;
			}
		},
		watch: {
			option: {
				handler() {
					echarts.init(this.$refs.pieChart).setOption(this.option, true, {
						devicePixelRatio: 2.5
					});
					echarts.init(this.$refs.pieChart).resize();
					// this.initEcharts();
				}
			}
		},
		methods: {
			// 整理x、y值
			getData() {
				let value = this.yData[0] || [];
				let pieCriData = []
				for (let i = 0; i < value.length; i++) {
					pieCriData.push({
						value: value[i],
						name: this.legendData[i]
					});
				}
				return pieCriData
			},
			initEcharts() {
				const targer = this;
				return {
					color: targer.color,
					// title: {
					// 	textStyle: {
					// 		color: '#333',
					// 		fontSize: '16px',
					// 		fontWeight: 400,
					// 		align: 'center'
					// 	},
					// 	text: targer.title,
					// 	top: '52%',
					// 	left: "21%", //对齐方式居中
					// 	// width:'80px'
					// },
					// graphic: {
					// 	type: 'text', // 通过不同top值可以设置上下显示
					// 	left: "26%",
					// 	top: "40%",
					// 	style: {
					// 		text: targer.grName, // "环图中添加颜色" + "\n" + "和series平级",
					// 		textAlign: 'center',
					// 		fill: '#333333', // 文字的颜色
					// 		width: 30,
					// 		height: 30,
					// 		fontSize: 22,
					// 		fontWeight: 'bold',
					// 		fontFamily: 'Microsoft YaHei'
					// 	}
					// },
					legend: {
						orient: "vertical",
						top: 'middle',
						left: '56%',
						itemWidth: 12,
						itemHeight: 12,
						textStyle: {
							color: '#b8b8b8',
							fontSize: '12px',
							fontWeight: '400'
						},
						data: targer.legendData,
						formatter: function(name) {
							let legendData = targer.option.series[0].data; //获取数据
							for (var i = 0; i < targer.option.series[0].data.length; i++) {
								if (name === legendData[i].name) {
									return name + '     ' + legendData[i].value;
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '86%'],
						center: ['30%', '50%'], //圆心的位置【据左侧占比，据顶部占比】
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 2
						},
						labelLine: {
							show: false
						},
						data: targer.getData()
					},
					 {
					            name: '中间文字',
					            z: 100,
					            type: 'gauge',
					            radius: '-50%',
					            center: ['30%', '50%'],// 需和type: 'pie'中的center一致
					            // 配置中间的数字的样式
					            detail: {
					              // 调节数字位置
					              offsetCenter: [-1,-10],
					              fontSize: '28px',
					              // fontFamily: fontFamily.fontFamily95W,
					              color: '#333333',
					            },
					            pointer: {
					              show: false,
					            },
					            axisTick: {
					              show: false,
					            },
					            axisLine: {
					              show: false,
					            },
					            splitLine: {
					              show: false,
					            },
					            axisLabel: {
					              show: false,
					            },
					            // 中间的字和数字 数据
					            data: [
					              {
					                value: targer.grName,
					                name:targer.title,
					                title:{
					                  show:true,
					                  // fontSize: fontSize(12),
					                  // fontFamily: fontFamily.fontFamily65W,
					                  color: '#333',
					                  offsetCenter:[0,'-30%']
					                }
					
					              },
					
					            ],
					          },
					]
				};
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pieChart {
		width: 100%;
		height: 100%;
	}
</style>